<template>

	<view class="content">
		<u-modal :show="showDel" title="温馨提示" :content='content' showCancelButton="true" @cancel="showDel=false"
			@confirm="handleDelLabConfirm"></u-modal>
		<u-picker :show="showSelect" :columns="columns" keyName="typeName" @confirm="handleChoose"
			@cancel="handleCancel"></u-picker>
		<u-picker :show="showSelect1" :columns="columns1" keyName="typeName" @confirm="handleChoose1"
			@cancel="handleCancel1"></u-picker>
		<view class="top">
			<view class="top_search">
				<view class="choose">
					<view class="choose-btn"><u-button type="primary" size="mini" text="模式切换" icon="hourglass-half-fill"
							@click="handleOpenChoose1"></u-button></view>
					<view class="choose-btn" v-if="activeIndex==0"><u-button type="primary" size="mini"
							:text="selectName" @click="handleOpenChoose"></u-button></view>


				</view>
				<u-search :showAction="true" v-if="activeIndex==0" placeholder="请输入实验室名称" v-model="form.labName"
					@search="handleSearch(0)" @custom="handleSearch(0)" actionText="搜索" :animation="true"></u-search>

				<u-search :showAction="true" v-if="activeIndex==1" placeholder="请输入实验室编号" v-model="form.laboratoryId"
					@search="handleSearch(1)" @custom="handleSearch(1)" actionText="搜索" :animation="true"></u-search>



			</view>
		</view>



		<!-- 滚动列表 -->
		<view class="list">
			<u-empty v-if="list.length==0" mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png" text="暂无数据">
			</u-empty>
			<u-loading-page loading-text="数据加载中" :loading="showLoading">

			</u-loading-page>

			<view class="list-item" @tap="handleItemClick(item.laboratoryId)" v-for="item in list"
				:key="item.laboratoryId">
				<!-- 顶部标题 -->
				<view class="item-top">{{item.labName}}</view>
				<!-- 编号 -->
				<view class="item-id">
					编号：{{item.laboratoryId}}
				</view>
				<!-- 中间盒子 -->
				<view class="item-center">
					<!-- 实验室简介 -->
					<view class="item-content">

						{{item.intro}}
					</view>
					<!-- 实验室图片 -->
					<view class="item-coverPhoto">
						<image :src="item.photo" mode=""></image>
					</view>
					<!-- 按钮盒子 -->
					<view class="item_btn">
						<!-- 						<view class="detail_btn">
							<u-button size="mini" text="查看详情"></u-button>
						</view> -->
						<!-- <view class="detail_btn" @tap.sotp="handleEidt(item.laboratoryId)">
							<u-button size="mini" type="primary" text="编辑"></u-button>
						</view> -->
						<view class="detail_btn" @tap.stop="handleEidt(item.laboratoryId)">
							<!--  -->
							<u-button size="mini" type="primary" text="编辑"></u-button>
						</view>
						<view class="detail_btn" @tap.stop="handleDel(item.laboratoryId)">
							<!--  -->
							<u-button size="mini" type="error" text="删除"></u-button>
						</view>
					</view>
				</view>
				<!-- 底部信息栏 -->
				<view class="item-bottom">
					<!-- 审核方式 -->
					<view class="check-type">

						实验室类型：
						<!-- <text class="contex">智能审核</text> -->
						<text class="contex1">{{item.typeName}}</text>

					</view>
					<!-- 容量 -->
					<view class="volume">
						审核：
						<text style="color:#41a863" v-if="item.isExamine==0">自动审核</text>
						<text style="color:#5064eb" v-if="item.isExamine==1">人工审核</text>

					</view>
					<!-- {{item.isExamine}} -->

				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import {
		getLablist,
		getAllLabType,
		deleteLab
	} from '../../api/laboratory.js'
	export default {
		data() {
			return {
				activeId: "",
				showDel: false,
				content: "此操作将删除该实验室，是否继续？",
				activeIndex: 0,
				columns1: [
					['模糊搜索', "精确搜索"]
				],
				showSelect1: false,
				form: {},
				list: [],
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				columns: [],
				showSelect: false,
				types: [],
				showLoading: false,
				selectName: "全部"

			};
		},
		methods: {
			// 删除实验室确定点击事件
			handleDelLabConfirm() {
				// console.log(this.activeId);
				deleteLab({
					laboratoryId: this.activeId
				}).then(res => {
					uni.$u.toast("删除成功")
					// 重新请求数据
					this.handleGetLabList()
				}).catch(error => {
					uni.$u.toast("删除失败")
				})
				this.showDel = false
			},
			// 删除事件
			handleDel(id) {
				// console.log(id);
				this.activeId = id
				this.showDel = true
			},
			// 编辑事件
			handleEidt(id) {
				uni.navigateTo({
					url: `/subpages/admin_lab_edit/admin_lab_edit?id=${id}`
				})
			},
			// 开始模式切换选择器
			handleOpenChoose1() {
				this.showSelect1 = true
			},
			// 模式切换取消按钮点击事件
			handleCancel1() {
				this.showSelect1 = false
			},
			// 模式切换确定按钮点击事件 
			handleChoose1(data) {

				// 一切换模式就清空表单
				this.form = {}
				let index = data.indexs[0]
				this.activeIndex = index
				this.selectName = "全部"
				// console.log(index);
				if (index == 0) {
					this.handleGetLabList()
				} else {
					this.list = []
				}
				this.showSelect1 = false
			},
			// 每一个实验室的点击事件
			handleItemClick(id) {
				uni.navigateTo({
					url: `/pages/admin_lab_detail/admin_lab_detail?laboratoryId=${id}`
				})
			},
			// 获取所有实验室类别
			handleGetAllType() {
				getAllLabType().then(result => {
					let arr = []
					arr = [...result.data]
					let obj = {
						typeId: "",
						typeName: "全部"
					}
					arr.unshift(obj)
					this.columns[0] = arr
					this.types = arr
					uni.stopPullDownRefresh();
				})
			},
			// 打开类型选择
			handleOpenChoose() {
				this.showSelect = true
			},
			// 选择器确定按钮点击事件
			handleChoose(data) {
				let index = data.indexs[0]
				// console.log(this.types[index]);
				this.form.typeId = this.types[index].typeId
				this.selectName = this.types[index].typeName
				// 重新请求数据
				this.handleGetLabList()
				this.showSelect = false


			},
			// 关闭选择器
			handleCancel() {
				this.showSelect = false
			},
			handleGetLabList() {
				this.showLoading = true
				getLablist(this.form).then(res => {
					// console.log(res);
					let arr = [...res.data.list]
					arr = arr.reverse()
					this.list = [...arr]
					// console.log(this.list);
					this.showLoading = false
					uni.stopPullDownRefresh();
				}).catch(error => {
					this.showLoading = false
				})
			},
			// 搜索实验室
			handleSearch(type) {
				if (type == 0) {
					this.handleGetLabList()
				} else if (type == 1) {
					if (!this.form.laboratoryId || isNaN(this.form.laboratoryId)) {
						uni.$u.toast('请正确输入实验室编号')
						return
					} else {
						this.handleGetLabList()
					}
				}

			}
		},
		created() {
			this.handleGetLabList()
			this.handleGetAllType()
		},
		onPullDownRefresh() {
			this.handleGetLabList()
			this.handleGetAllType()
		},
		onShow() {
			this.handleGetLabList()
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		// overflow: hidden;
		display: inline-block;
		// 

		.top {
			width: 100%;
			height: 180upx;
			overflow: hidden;
			box-shadow: 0 3upx 30upx rgba(0, 0, 0, .15);
			// 

			.top_search {
				position: relative;
				box-sizing: border-box;
				width: 100%;
				padding: 0 20upx;
				margin-top: 30upx;
				display: flex;
				flex-direction: row;
				align-items: center;


				.choose {
					position: absolute;
					top: 44px;
					left: 10px;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;

					.choose-btn {
						color: #ff0000;
						width: 200upx;
						margin-right: 20upx;

					}
				}
			}
		}



		.list {
			box-sizing: border-box;
			padding: 28upx;
			width: 100%;
			height: 84vh;
			background-color: #fff;
			overflow-y: scroll;

			.list-item {
				position: relative;
				box-sizing: border-box;
				padding: 30upx;
				width: 100%;
				min-height: 270upx;
				background-color: #fff;
				border-radius: 30upx;
				margin-bottom: 37upx;
				box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.15);
				font-weight: 700;

				.item-id {
					position: absolute;
					top: 5px;
					right: 15px;
					font-size: 12px;
					font-weight: 400;
					color: #afafaf;

				}

				.item-top {
					max-width: 60%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

				}

				.item-center {
					width: 100%;
					height: 145upx;
					// background-color: pink;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.item-content {
						flex: 1;
						margin-right: 20upx;
						background-color: #fff;
						height: 107upx;
						overflow: hidden;
						font-size: 28upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						/*! autoprefixer: off */
						-webkit-box-orient: vertical;
						// text-indent: 2em;
						font-weight: 400;

					}

					.item-coverPhoto {
						width: 140upx;
						height: 140upx;
						background-color: #fff;
						border-radius: 10upx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10upx;
						}
					}

					.item_btn {
						box-sizing: border-box;
						padding: 10upx;
						width: 135upx;
						height: 144upx;
						margin-left: 20upx;
						// background-color: pink;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						// margin-top: 32upx;
						padding-right: 0upx;

						.detail_btn {
							width: 100%;
							height: 50upx;
						}
					}
				}

				.item-bottom {
					height: 30upx;
					// background-color: pink;
					margin-top: 5upx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					font-size: 12px;
					font-weight: 400;
					color: #afafaf;


					.contex {
						color: #00b26a;
					}

					.contex1 {
						color: #5064eb;
					}

					.check-type {
						margin-right: 40upx;
					}
				}
			}

		}
	}
</style>